<template>
    <div>
        <div>
            <div class="header_box">
                <div>
                    <van-icon class="icon" name="arrow-left" @click="back" />
                </div>
                <div name="center">商品分类</div>
                <div name="right" @click="paixu">排序</div>
            </div>
            <div v-if="stater" class="a-center d-flex j-center text-dark font-sm">
                <p>------ 暂无分类------</p>
            </div>
            <div v-else class="p-1 position-relative" :style="{ height: NewHeigh }">
                <div class="">
                    <div v-if="dataList.length > 0">
                        <div
                            v-for="(item, index) in dataList"
                            :key="index"
                            @click="shangpingBianji(index)"
                            class="d-flex a-center j-sb border-bottom"
                        >
                            <div class="font-mi">
                                <div class="d-flex j-start">
                                    <p>中文名称：</p>

                                    <p class="text-muted px-2">{{ item[0] }}</p>
                                </div>
                                <div class="d-flex j-start">
                                    <p>英文名称：</p>

                                    <p class="text-muted px-2">{{ item[1] }}</p>
                                </div>
                                <div class="d-flex j-start">
                                    <p>分类描述：</p>
                                    <p class="text-muted px-2">{{ item[2] }}</p>
                                </div>
                                <div class="d-flex j-start">
                                    <p>是否可用：</p>

                                    <p class="text-muted px-2">{{ (item[3] = true ? '是' : '否') }}</p>
                                </div>
                            </div>
                            <div><van-icon name="arrow" /></div>
                        </div>
                    </div>

                    <div v-else class="font-sm py-1 j-center">暂无数据</div>
                </div>
                <!-- button-->
                <div class="position-absolute bottom-0 w-100 font-mi">
                    <div class="d-flex j-center a-center">
                        <div><van-icon name="plus" class="font-sm font-weight text-primary" /></div>
                        <p @click="addTianjia">添加分类</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            stater: false,

            NewHeigh: '',
            height: '',
            dataList: []
        }
    },
    created() {
        this.height = window.innerHeight - 80
        this.NewHeigh = this.height + 'px'
        console.log(this.NewHeigh)
        console.log(this.$store.state.CommAdd.addGoodsClass)
        this.dataList = this.$store.state.CommAdd.addGoodsClass
        console.log(this.dataList)
    },
    methods: {
        ...mapState(['CommAdd/addGoodsClass']),
        back() {
            this.$router.go(-1)
        },
        paixu() {
            console.log('paix')
            this.$router.push('/CommodityMan')
        },
        shangpingBianji(id) {
            console.log(id)
            this.$router.push('/CommodityMan/CommFenList')
        },
        addTianjia() {
            console.log('添加')
            this.$router.push('/CommodityMan/AddListComView')
        }
    }
}
</script>

<style lang="scss" scoped>
.header_box {
    width: 100%;
    background-color: rgba(255, 110, 83, 1);
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 16px;
    color: aliceblue;
    position: relative;
    justify-content: space-around;
}
.icon {
    left: 10px;
}
</style>
